<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件化</title>
	</head>
	<body>
		<div id="app">
			<!-- 通过组件的名称，通过标签进行调用 -->
			<add-num-component></add-num-component>
			<add-num-component></add-num-component>
		</div>
		<!-- 3定义html模板 -->
		<template id ="addNumTem">
			<div >
				<h1>定义组件</h1>
				<h3>数值:{{num}}</h3>
				
					<button type="button" @click="addNum">自增</button>
			</div>
			
		
		</template>
		<script src = "../js/vue.js">	
		</script>
		<!-- 定义组件  全局组件-->
		<script>
			Vue.component('addNumComponent',{
				// 定义组件内部结构
				data(){
					return{
						num:0
					}
				},
				// 定义组件的标签体 方式1:字符串拼接
				// template: "<div>{{num}} <button @click='addNum'></button> </div>",
				// 方式2:字符串模板 (``)块级作用域
				// 方式3:template 模板语法
				template:"#addNumTem",
				methods:{
					addNum(){
						this.num++
					}
				}
			})
			// 定义vue对象
			const app = new Vue({
				el:"#app",
			
			})
		</script>
	</body>
</html>
